<template>
  <div>
    <van-nav-bar
      :title="proInfo.description"
      left-arrow
      @click-left="jump('returnData')"
    />
      <!-- @click-left="$router.back()" -->
    <!-- 内容 -->
    <div class="img">
      <van-image round width="15rem" height="15rem" :src="proInfo.image_path" />
    </div>
    <div class="content">
      <p>{{ proInfo.name }}</p>
      <h6>{{ proInfo.description }}</h6>
      <p>
        评分
        <van-rate
          v-model="proInfo.rating"
          allow-half
          void-icon="star"
          void-color="#eee"
          color="#ffd21e"
          :size="12"
        />
        <span class="rating">{{ proInfo.rating }}</span>
      </p>
      <p>
        月售 {{ proInfo.month_sales }}单
        <span style="color: #ff7e00">售价$200起</span>
      </p>
      <p>评论数{{ proInfo.rating_count }} 好评率{{ proInfo.satisfy_rate }}%</p>
    </div>
    <shopcart :data="shopCart"></shopcart>
  </div>
</template>

<script>
import shopcart from "@/components/goods/shopcart/shopcart.vue";
import axios from "@/utils/request";
import eventBus from "@/EventBus/index.js"
export default {
  components: {
    shopcart,
  },
  data() {
    return {
      proInfo: JSON.parse(localStorage.getItem("initData")) || {
        description: "冰凉盛夏",
        image_path:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2F50%2Fv2-5095f9e4ef2c7eea1b768b5647eebb42_hd.jpg&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634615556&t=3a26df063aa32be4ca4070d11aeacba1",
        month_sales: 739,
        name: "冰激凌圣代",
        rating: 4.7,
        satisfy_rate: 46,
        rating_count: 438,
      },
      //购物车数据获取
      shopCart: JSON.parse(localStorage.getItem('shopCarData'))||[]
    };
  },
  created() {
    this.proInfo.image_path = `${axios.defaults.baseURL}/img/${this.proInfo.image_path}`;
  },
  methods:{
    //兄弟传值
    jump(returnData){
      //动态改变本地存储数据
      // localStorage.setItem("shopCarData", JSON.stringify(this.shopCart));
      eventBus.$emit('product',returnData)
      this.$router.back()

    }
  }
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar {
  background-color: #3190e8;
  font-size: 18px;
  .van-nav-bar__title,
  .van-icon {
    color: #fff;
    font-size: 18px;
  }
}
.img {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.content {
  margin-top: 20px;
  padding: 0 20px;
  font-size: 14px;
  color: #666;
  line-height: 24px;
  .rating {
    color: #ff7e00;
    font-size: 12px;
    margin-left: 10px;
  }
  h6 {
    color: #000;
  }
}
</style>
